Skip to main content

Enabling the Swiper Manipulation Module

If you're using the Product Video module by Smart Modules in a PrestaShop theme that uses Swiper Slider, you might encounter an issue where the video thumbnail fails to appear alongside your product images.

This usually happens when the Manipulation module from Swiper has not been enabled. The module is essential for allowing dynamic elements (like video slides) to be inserted into the slider at runtime.

🧠 When Do You Need This?​

You may see an error like this in your browser console:

danger

Uncaught TypeError: slider.addSlide is not a function

Why this happens

This error means that the Swiper slider on your theme is not initialized with the Manipulation module, which is required by the Product Video module to dynamically add video thumbnails as slides.

The good news? Fixing this only requires a small edit in your theme's Swiper initialization code.

🛠️ Step-by-Step: How to Enable the Manipulation Module​

1. Locate the Swiper Initialization Code​

In your theme's files, locate the JavaScript file that initializes the product image slider.
This is typically located in:

/themes/your-theme/assets/js/product.js
/themes/your-theme/js/product.js
/themes/your-theme/js/custom.js

Search for a Swiper setup like this:

var swiper = new Swiper('.swiper-container', {
  // your Swiper options
});

2. Add the Manipulation Module​

Inside the Swiper config, find the modules property. Add Manipulation to the list.

Example before:

modules: [Navigation, Pagination],

Update to:

modules: [Navigation, Pagination, Manipulation],

If the modules property doesn't exist yet, add it like this:

modules: [Manipulation],
Keep existing modules

Don't remove any existing modules — add Manipulation to the list.

3. Clear PrestaShop Cache​

After saving your changes:

  1. Go to your Back Office
  2. Navigate to Advanced Parameters > Performance
  3. Click Clear Cache

This ensures your updated JavaScript is loaded correctly.

4. Test the Result​

Reload any product page with an attached video.
If everything is correct, the video thumbnail will now appear as part of the product image gallery, fully integrated into the Swiper slider.

📚 Related Links​

What error tells me the Swiper Manipulation module is missing?

You will see a JavaScript console error that says: Uncaught TypeError: slider.addSlide is not a function. This means Swiper was initialized without the Manipulation module, which the Product Video module needs to insert video slides dynamically.

Where do I find the Swiper initialization code in my theme?

Look in your theme's JavaScript files, typically at themes/your-theme/assets/js/product.js, themes/your-theme/js/product.js, or themes/your-theme/js/custom.js. Search for new Swiper to locate the initialization block.

Do I need to remove existing Swiper modules when adding Manipulation?

No. Add Manipulation to the existing modules array without removing anything. For example, if it reads modules: [Navigation, Pagination], change it to modules: [Navigation, Pagination, Manipulation].

After editing the Swiper configuration, why is the video thumbnail still not appearing?

You need to clear the PrestaShop cache after saving your JavaScript changes. Go to Back Office, then Advanced Parameters, then Performance, and click Clear Cache to ensure the updated file is loaded.

💬 Still Need Help?​

If you're unsure where this code is located or how to modify it, feel free to contact our support team. You can also send us the file where the Swiper is initialized, and we'll gladly guide you through the change.

By following these steps, you'll ensure full compatibility between your theme's Swiper slider and the Product Video module by Smart Modules, keeping your video thumbnails working smoothly and avoiding any JavaScript errors.